<template>
  <div class="wodedingdan">
    <head_>
      <h1>我的订单</h1>
    </head_>
    <div class="dingdan_list">
      <ul v-for="(item,index) in list" :key="item.id" @click="go_detail(index)">
        <li>
          <img src="../../assets/dingdanxinxi/car.jpg" alt />
        </li>
        <li>
          <p>
            <span v-text="item.titl"></span>
            <span>订单详情 ></span>
          </p>
          <p>日租：{{ item.time }}天</p>
          <p>租车日期：{{ item.day }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { myOrder } from "@/request/home/home_http";
import head_ from "./header";
import { queryOrderByMid } from "../../request/userinfo/userinfo";
export default {
  props: {},
  data() {
    return {
      list: [],
      childlist: null,
    };
  },
  methods: {
    go_detail(index) {
      this.$router.push(`/xiangqing1/${JSON.stringify(this.childlist[index])}`);
    },
  },
  components: {
    head_,
  },
  mounted() {
    queryOrderByMid({
        clientId: this.$store.state.user.id
    }).then((res) => {
      console.log("...res...."+JSON.stringify(res));
      this.childlist = res;
      // //用Array.from（）方法转换为数组，并用list变量接收
      let list1 = Array.from(res);
      list1.forEach((item) => {
        let start = new Date(item.startTime);
        let end = new Date(item.endTime);
        let date = `${start.getFullYear()}年${
          start.getMonth() + 1
        }月${start.getDate()}日`;
        this.list.push({
          titl: item.carName,
          id: item.id,
          time: Math.ceil((end - start) / 1000 / 60 / 60 / 24),
          day: date,
        });
      });
    });
  },
};
</script>

<style scoped lang="less">
.wodedingdan {
  width: 100%;
  height: 100%;
  font-size: 0;
  .dingdan_list {
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
    padding: 0.1rem 0;
    ul {
      width: 95%;
      height: 1.8rem;
      background: white;
      margin: 0.2rem auto;
      border-radius: 0.08rem;
      display: flex;
      align-items: center;
      li {
        height: 90%;
      }
      li:nth-child(1) {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 2.2rem;
          height: 1.3rem;
          margin-left: 0.1rem;
        }
      }
      li:nth-child(2) {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        p {
          padding: 0 0.21rem;
        }
        p:nth-child(1) {
          display: flex;
          justify-content: space-between;
          span:nth-child(1) {
            font-weight: 600;
            font-size: 0.28rem;
          }
          span:nth-child(2) {
            color: #999;
            font-size: 0.24rem;
          }
        }
        p:nth-child(2),
        p:nth-child(3) {
          font-size: 0.23rem;
          color: #666;
        }
      }
    }
  }
}
</style>
